<template>
	<section>
		<div class="circle"></div><div class="titleStyle">设置评分准则</div>
		<el-row style="padding-bottom: 0px;" type="flex" size='medium'>
			<div class="lablestyle">选择地区</div>
			<el-select v-model="provinces" style="width:140px;" placeholder="选择地区" size='medium'>
				<el-option v-for="province in provinceList"
				 :key="province.province"
				 :value="province.province"
				 :label="province.province">
				</el-option>
			</el-select>
			<div class="lablestyle" style="width: 90px;margin-left: 40px;">设置评分阶梯</div>
			<template>
  				<el-input-number v-model="scoringLadder" controls-position="right" @change="handleChange" :min="1" :max="15" class="numberstyle">
  						<el-input v-model="input" placeholder="请输入内容"></el-input>
  				</el-input-number>
			</template>
		</el-row>
		<div class="lablestyle" style="width: 100%;">设置科目分数： <span style="color: #455cfb">请选择考试科目（多选）并设置单科总分</span></div>
		<el-row style="padding-bottom: 0px;" type="flex" size='medium'>
			<el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
				<el-checkbox v-for="city in examinations" :label="city" :key="city">{{city}}</el-checkbox>
			</el-checkbox-group>
		</el-row>
		<el-input v-model="input" size="mini" placeholder="请设置科目分数"></el-input>
		<el-input v-model="input1" size="mini" placeholder="请设置科目分数"></el-input>
		<el-input v-model="input2" size="mini" placeholder="请设置科目分数"></el-input>
		<el-input v-model="input3" size="mini" placeholder="请设置科目分数"></el-input>
		
		<div class="lablestyle" style="width: 100%;font-size: 12px;">填写说明：多条要求请分号隔开</div>
		<div class="lablestyle" style="width: 100%;font-size: 12px;line-height: 8px;">填写示例：（A:90+；符合实际规定及要求；造型标准；有较强表现塑造力；占比：5% <i class="el-icon-picture" style="font-size: 16px; color: #204BD6;"></i>）
		</div>
		<div id="scoringLadderDiv" style="float: left;width: 100%;">
			<div id="oldscoringLadderNum1"style="width: 275px;float: left;margin-right: 5%;">
				<div class="lablestyle" style="width: 100%;">A：请添加评分描述</div>
				<div>
					<el-input style="width: 185px;float: left;font-size: 12px;" type="textarea" :rows="5" placeholder="请输入内容" v-model="textareaA"></el-input>
					<div style="height: 100px;width: 80px;float: left;text-align: center;border: 1px solid #DCDFE6;border-left: 0;border-top-right-radius: 4px;border-bottom-right-radius: 4px;font-size: 12px;">
						<div style="font-size: 30px;margin-top: 15px;color: #C9CBD4;">+</div>
						<div>上传范例图</div>
					</div>
				</div>
			</div>
			
		</div>

		<div style="float: left;width: 100%;">
			<div class="circle"></div><div class="titleStyle">设置作品照片要求</div>

			<div>
				<el-input style="width: 180px;float: left;font-size: 12px;border-radius: 4px;" type="textarea" :rows="5" placeholder="请输入内容" v-model="textarea1"></el-input>
				<div style="height: 100px;width: 180px;float: left;text-align: center;border: 1px solid #DCDFE6;border-radius: 4px;font-size: 12px;margin-left: 50px;">
					<div style="font-size: 30px;margin-top: 15px;color: #C9CBD4;">+</div>
					<div>上传范例图</div>
					<div style="font-size: 12px;color: #C9CBD4;">仅支持jpg格式</div>
				</div>
			</div>
		</div>
		<div style="float: left;width: 100%;">
			<el-button style="float: right;margin-right: 20px;"type="primary" v-on:click="updateForm" size='medium'>编辑</el-button>
			<el-button style="float: right;margin-right: 20px;"type="primary" v-on:click="submitForm" size='medium'>保存</el-button>
		</div>
		
	</section>
</template>

<script>
	import axios from 'axios'
	import provinceCodeList from "../../utils/provinceCode";
	import {getgradeRule,gradeRule_create} from '../../api/api';
	import userAdd from './userAdd';
	import userModify from './userModify';
	const examinationOptions = ['色彩', '素描', '速写', '构成'];
	export default {
		components:{userAdd,userModify},
		data() {
			return {
				provinceList:provinceCodeList,
				userModifyVisible:false,
				userAddVisible: false,//编辑界面是否显示
				scoringLadder: 1,//评分阶梯
				oldscoringLadderNum: 1,
				input: '100',
				input1: '',
				input2: '',
				input3: '',
				textareaA: '',
				textareaB: '',
				textareaC: '',
				textareaD: '',
				textareaE: '',
				textareaF: '',
				textareaG: '',
				textareaH: '',
				textareaI: '',
				textareaG: '',
				textareaL: '',
				textareaM: '',
				textareaN: '',
				textareaO: '',
				textarea1: '',
				provinces:'浙江',//选择省份
				transRow:{},
				exampaper:[],
				users: [],
				total: 0,
				page: 1,
				listLoading: false,
				sels: [],//列表选中列
				editLoading: false,
				editFormRules: {
					name: [
						{ required: true, message: '请输入姓名', trigger: 'blur' }
					]
				},
				//设置科目分数
				checkAll: false,
		        checkedCities: ['色彩'],
		        examinations: examinationOptions,
		        isIndeterminate: true
			}
		},
		methods: {
			format:function(paper) {
				return (percentage)=>{
					return `已上传${paper.total}张`
				}
			},
			//评分阶梯
			handleChange(value) {			
        		if(value>this.oldscoringLadderNum){
        			let scoringLadderNum = String.fromCharCode(64 + parseInt(value))
        			this.oldscoringLadderNum = value
        			let addDiv = document.createElement('div');
        			addDiv.innerHTML   ='<div id="oldscoringLadderNum'+value+'" style="width: 275px;float: left;margin-right: 5%;">' +
                                '<div class="lablestyle" style="width: 100%;">'+scoringLadderNum+'：请添加评分描述</div>'+
                                '<div><div class="el-textarea" style="width: 185px; float: left; font-size: 12px;"><textarea autocomplete="off" rows="5" placeholder="请输入内容" class="el-textarea__inner" style="min-height: 30px;" v-model="textarea'+scoringLadderNum+'"></textarea></div>'+
                                '<div style="height: 100px;width: 80px;float: left;text-align: center;border: 1px solid #DCDFE6;border-left: 0;border-top-right-radius: 4px;border-bottom-right-radius: 4px;font-size: 12px;">' +
						'<div style="font-size: 30px;margin-top: 15px;color: #C9CBD4;">+</div><div>上传范例图</div></div></div></div>';

                     let saddscoringLadder = document.getElementById('scoringLadderDiv');
                     saddscoringLadder.appendChild(addDiv)
                     
        		}else{
        			let removeDiv = document.getElementById('oldscoringLadderNum'+this.oldscoringLadderNum);
        			removeDiv.parentNode.removeChild(removeDiv);
        			this.oldscoringLadderNum = value
        		}
        		
      		},
      		//设置科目分数

		    handleCheckedCitiesChange(value) {

		        let checkedCount = value.length;
		        this.checkAll = checkedCount === this.examinations.length;
		        this.isIndeterminate = checkedCount > 0 && checkedCount < this.examinations.length;
		    },
			
			//获取用户列表
			getUsers() {
				getgradeRule().then((ossToken)=>{
					console.log(ossToken)
			        let ossClient=new OSS({
			          region:'oss-cn-hangzhou',
			          accessKeyId: ossToken.result.credentials.accessKeyId,
			          accessKeySecret: ossToken.result.credentials.accessKeySecret,
			          stsToken: ossToken.result.credentials.securityToken,
			          bucket: 'topexam'
			        })
			        ossClient.put('paper/sumiao/', file).then(function (result) {
			            console.log(result);
			          }).catch(function (err) {
			            console.log(err);
			          })
			      }).catch((err)=>{console.log(err)})
			},
			submitForm(formName) {
				console.log(this.input2)
				let forms= {
					province: this.provinces,
					grade: this.scoringLadder,
					scoreRulers: [{
						text:"色彩",
						value:this.input ? this.input : '0',
					},{
						text:"素描",
						value:this.input1 ? this.input1 : '0',
					},{
						text:"速写",
						value:this.input2 ? this.input2 : '0',
					},{
						text:"构成",
						value:this.input3 ? this.input3 : '0',
					}],
					examples:[{
						text:this.textareaA ? this.textareaA : '.',
						value:"url"
					},{
						text:this.textareaB ? this.textareaB : '.',
						value:"url"
					},{
						text:this.textareaC ? this.textareaC : '.',
						value:"url"
					},{
						text:this.textareaD ? this.textareaD : '.',
						value:"url"
					},{
						text:this.textareaE ? this.textareaE : '.',
						value:"url"
					}],
					claim: [{
						text:this.textarea1 ? this.textarea1 : '.',
						value:"url"
					}]
				}

		        gradeRule_create(forms).then((res)=>{
					console.log(res)
				})
		            alert('上传成功!');//这里就是符合规则，然后去调对应的接口
		   },
		   updateForm(formName) {
				console.log(this.input2)
				let forms= {
					province: this.provinces,
					grade: this.scoringLadder,
					scoreRulers: [{
						text:"色彩",
						value:this.input ? this.input : '0',
					},{
						text:"素描",
						value:this.input1 ? this.input1 : '0',
					},{
						text:"速写",
						value:this.input2 ? this.input2 : '0',
					},{
						text:"构成",
						value:this.input3 ? this.input3 : '0',
					}],
					examples:[{
						text:this.textareaA ? this.textareaA : '.',
						value:"url"
					},{
						text:this.textareaB ? this.textareaB : '.',
						value:"url"
					},{
						text:this.textareaC ? this.textareaC : '.',
						value:"url"
					},{
						text:this.textareaD ? this.textareaD : '.',
						value:"url"
					},{
						text:this.textareaE ? this.textareaE : '.',
						value:"url"
					}],
					claim: [{
						text:this.textarea1 ? this.textarea1 : '.',
						value:"url"
					}]
				}

		        gradeRule_update(forms).then((res)=>{
					console.log(res)
				})
		            alert('修改成功!');//这里就是符合规则，然后去调对应的接口
		   }
		},
		mounted() {
			axios.defaults.headers.common["Art-Token"] = sessionStorage.getItem('Art-Token');
			this.exampaper=this.$store.state.exampaper
			this.getUsers();
		}
	}

</script>

<style>
.el-button--small{
	padding: 1px 1px;
}
.el-dialog__header{
	text-align: center;
}
.el-dialog__title{
	font-size: 32px;
}
.numberstyle{
	width: 100px;
	height: 36px;
}
.el-input__inner{
	height: 36px;
}
.el-input-number{
   line-height: 36px;
}
.lablestyle{
	font-size: 14px;
    width: 65px;
    color: #0E0E0E;
    line-height: 36px;
}
.circle{
	float: left;
    margin-top: 14px;
    margin-right: 5px;
	width: 8px;
	height: 8px;
	background-color:red;
	border-radius: 50%;
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
}
.titleStyle{
	font-size: 14px;
    width: 100%;
    color: #0E0E0E;
    font-weight: bold;
    line-height: 36px;
}
.el-checkbox{
	margin-right: 120px;
}
.el-input--mini{
	font-size: 12px;
    width: 96px;
    top: -23px;
    left: 56px;
    margin-right: 72px;
}
.el-input__inner{
	padding: 0 5px;
	text-align: center;
}
.el-input--mini .el-input__inner{
	color: #204BD6;
	font-size: 14px;
}
.el-textarea__inner{
	padding: 5px;
	border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
</style>